<template>
  <div class="staff">
    <div class="box">
        <div class="warp">
            <div class="logo">
                <img src="../assets/jiazhenglogo.png" alt="">
            </div>
            <div class="zhuce">
                <div class="shadow" v-show="shadow">
                    注册成功！2秒后跳转至登录<br>
                    <i class="el-icon-success green"></i>
                </div>
                <div class="buzhou">
                    <el-steps :active="active" align-center>
                        <el-step title="设置账号密码"></el-step>
                        <el-step title="填写个人信息"></el-step>
                        <el-step title="选择服务类型"></el-step>
                        <el-step title="注册成功"></el-step>
                    </el-steps>
                </div>
                <div class="staff c">
                  <div v-show="one">
                    <div class="input" style="width:600px">账号：<input type="text" v-model="uid" @blur="uidkong"><span class="tip">账号可以包含数字和字母，并且必须大于等于六位</span>
                        <div class='uidk' v-show="uidk">账号不能为空</div>
                        <div class='uidk' v-show="uidc">账号格式不正确</div>
                    </div>
                    <div class="input" style="width:600px">密码：<input type="password" v-model="password" @blur="passwordkong"><span class="tip">密码可以包含数字和字母，并且必须大于等于六位</span>
                        <div class='uidk' v-show="passwordk">密码不能为空</div>
                        <div class='uidk' v-show="passwordc">密码格式不正确</div>
                    </div>
                    <button class="register" @click="totwo">下一步</button>
                  </div>
                  <div v-show="two">
                    <div class="input" style="-sizing:border-box"> <span style="margin-right:-29px">姓</span> 名:<input type="text" v-model="name" @blur="namecuo">
                        <div class='uidk' v-show="namek">姓名不能为空</div>
                        <div class='uidk' v-show="namec">姓名必须为2-5位汉字</div>
                    </div>


                    <div class="input2">个人介绍:
                        <textarea rows="6" cols="40" v-model="content"></textarea>
                        <div class='uidk3' v-show="contentk">个人介绍不能为空</div>
                    </div>
                    <div class="input2">时薪选择:
                        <select name="" id="" v-model="h_price" @blur="h_pricegai">
                            <option value="" checked>请选择时薪</option>
                            <option value="50">50元</option>
                            <option value="70">70元</option>
                            <option value="90">90元</option>
                        </select>
                        <!-- <div class='typek' v-show="h_pricek">时薪必须选择</div> -->
                    </div>
                    <div class="input">身份证：<input type="text" v-model="id" @blur="idcuo">
                            <div class='uidk' v-show="idk">身份证不能为空</div>
                            <div class='uidk' v-show="idc">身份证格式不正确</div>
                        </div>
                        <div class="input">年龄：<input type="text" v-model="age" class="age" disabled style="border:none">
                        </div>

                    <div class="input">手机号码：<input type="tel" v-model="tel" @blur="telcuo">
                        <div class='uidk' v-show="telk">手机号码不能为空</div>
                        <div class='uidk' v-show="telc">手机号码格式不正确</div>
                    </div>

                    <div class="input" @click="emailcuo" style=" box-sizing:border-box"><span style="margin-right:-12px">地</span>址:
                        <el-cascader
 
                        size="large"
                    
                        :options="options"
                    
                        v-model="selectedOptions"
                        style="height:50px"
                    
                        @change="handleChange">
                    
                        </el-cascader>
                        <div class='uidk1' v-show="emailk">地址不能为空</div>
                    </div>
                    <button class="register" @click="tothree" >下一步</button>
                  </div>
                  <div v-show="three">
                    <!-- <input type="file"> -->
                    <div class="input1">家政类型：<br>
                        <select name="" id="" v-model="type" @blur="types">
                            <option value="" checked>请选择</option>
                            <option value="1">月嫂</option>
                            <option value="2">保洁</option>
                            <option value="3">家政</option>
                        </select>
                        <div class='typek' v-show="typek">家政类型必须选择</div>
                    </div>
                    <div class="input1">服务内容(必选)：<br>
                        <input type="checkbox" value="做饭" @click="serviceall" class="service"> 做饭
                        <input type="checkbox" value="做家务" @click="serviceall" class="service"> 做家务
                        <input type="checkbox" value="照顾孩子" @click="serviceall" class="service"> 照顾孩子 <br>
                        <input type="checkbox" value="照顾老人" @click="serviceall" class="service"> 照顾老人
                        <input type="checkbox" value="育婴师" @click="serviceall" class="service"> 育婴师
                        <input type="checkbox" value="催乳师" @click="serviceall" class="service"> 催乳师
                    </div>
                    <div class="input1">上传工作证书照片：<br>
                        <input type="file" name="" id="img" @blur="img">
                    </div>
                    <button class="register" @click="tofour">确认注册</button>
                  </div>
                </div>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
import { regionData,CodeToText } from 'element-china-area-data'
export default {
    data(){
        return{
            options: regionData,
 
            selectedOptions: [],
            idk:false,
            idc:false,
            uidk:false,
            uidc:false,
            passwordk:false,
            passwordc:false,
            namek:false,
            namec:false,
            telk:false,
            telc:false,
            emailk:false,
            fag1:true,
            fag2:false,
            typek:false,
            contentk:false,
            h_pricek:false,

            one:true,
            two:false,
            three:false,
            
            shadow:false,
            sign:0,
            active:0,
            uid:'',//账号
            id:'',
            age:"",
            password:'',// 密码
            name:'',//姓名
            tel:'',//电话
            type:0,//家政类型
            service:[],//服务类型
            province:'',//省
            city:'',//市
            area:'',//区
            zhengjian:'',//证件照片
            h_price:'',//时薪
            content:'日常家务照顾老人严选400000+位优质阿姨服务1500万家庭用户覆盖全国100座城市e城e家1对1专属顾问，持证上岗,7*24小时在线咨询!',//个人介绍
            x1:0,
            x2:0,
            x3:0,
            x4:1,
            x5:0,
            x6:0,
            x7:0,
            x8:0,
            x9:0
        }
    },
    watch:{
        content(){
          if(this.content == ''){
              this.contentk=true
              this.x4 = 0;
              console.log(0);
          }else{
              this.contentk=false
              this.x4 = 1;
              console.log(1);
          }
       }
    },
    methods:{
        idcuo(){
            if(this.id == ''){
                this.idc = false
                this.idk = true
                this.x4 = 0;
            }else{
                this.idk = false
                var pattern = /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/;
                if(!pattern.test(this.id)){
                    this.idc = true;
                    this.x4 = 0;
                }else{
                    this.idc = false
                    var cccc = this.id.substring(6,10);
                    this.age = 2021 - cccc;
                    this.x4 = 1;
                    console.log(this.x4);
                }
            }
        },
        h_pricegai(){
            if(this.h_price == ''){
              this.h_pricek = true
              this.x9 = 0;
          }else{
              this.h_pricek = false
              this.x9 = 1;
          }
        },
        img(){
            var val = document.querySelector('#img');
            if(val.value !=''){
                this.x8 = 1;
                console.log(this.x8);
            }else{
                this.x8 = 0;
                console.log(this.x8);
            }
            // var val = document.querySelector('#img');
            // console.log(val.files);
            // let f = new FormData()
            // f.append('img',val.files[0])
            // this.myaxios({
            //     url:'http://housekeepi.com/api/savePic',
            //     method:'post',
            //     data:f,
            // }).then((res)=>{},()=>{}).catch(()=>{}) //Promise
        },
        handleChange (value) {
        this.province = CodeToText[value[0]];
        this.city = CodeToText[value[1]];
        this.area = CodeToText[value[2]];
        console.log(this.province);
        console.log(this.city);
        console.log(this.area);
        this.emailk = false
        this.x6 = 1;
      },
      totwo(){
        if(this.x1 == 1 && this.x2 == 1){
            this.active = 1
            this.two = true;
            this.one = false
        }else{
            this.$message.error('账号/密码未输入或不符合规范！');
        }
      },
      tothree(){
        if(this.x3 == 1 && this.x4 == 1 && this.x5 == 1 && this.x6 == 1 && this.x9 == 1){
            this.active = 2
            this.three = true;
            this.two = false
        }else{
            this.$message.error('个人信息填写不完整！');
        }
      },
      tofour(){
        if(this.x7 == 1&&this.x8 == 1){
          if(this.service.length==0){
            this.$message.error('请选择家政类型和服务内容！');
          }else{
            var val = document.querySelector('#img');
            console.log(val.files);
            let f = new FormData()
            f.append('img',val.files[0])
            this.myaxios({
                url:'http://housekeepi.com/api/savePic',
                method:'post',
                data:f,
            }).then((res)=>{
                this.zhengjian=res.data.data;
            },()=>{}).catch(()=>{}) //Promise
            this.active=3
            this.active=4
            this.service = JSON.stringify(this.service);
            // uid:'',//账号
            // password:'',// 密码
            // name:'',//姓名
            // tel:'',//电话
            // email:'',//邮箱
            // type:'',//家政类型
            // service:[],//服务类型
            this.myaxios({
                    url:'http://housekeepi.com/api/register',
                    method:'post',
                    data:{
                        type:2,//员工
                        name:this.uid,//用户账号
                        pw:this.password,//用户密码
                    }
                }).then((res)=>{
                    var tokencp = res.data.data.token;
                    console.log(res.data.data.token);
                    this.myaxios({
                        url:'http://housekeepi.com/api/userModify',
                        method:'post',
                        data:{
                            token:tokencp,
                            nick_name:this.name,//姓名
                            work_type:Number(this.type),//家政类型
                            province:this.province,//省
                            h_price:this.h_price,//时薪
                            describe:this.content,//个人介绍
                            city:this.city,//市
                            area:this.area,//区
                            icon:this.zhengjian,//证件照片
                            address:this.service,//服务类型
                            phone:this.tel,
                            age:this.age,
                            content:JSON.stringify([{age:this.age}])
                        }
                    }).then((res)=>{},()=>{}).catch(()=>{})
                },()=>{}).catch(()=>{}) //Promise
              this.shadow=true
              setTimeout(() => {
                  this.get()
              }, 2000);
          }
        }else{
          this.$message.error('请选择家政类型和服务内容！');
        }
      },
      types(){
          if(this.type == ''){
              this.typek = true
              this.x7 = 0;
          }else{
              this.typek = false
              this.x7 = 1;
              console.log(this.type);
              console.log(typeof this.type);
          }
      },
      uidkong(){
        if(this.uid == ''){
            this.x1 = 0;
            this.uidk = true
            this.uidc = false
        }else{
            this.uidk = false
            var pattern = /^[\w_-]{6,16}$/;
            if(!pattern.test(this.uid)){
                this.uidc = true
                this.x1 = 0;
            }else{
                this.uidc = false;
                this.x1 = 1;
                console.log(this.x1);
            }
        }
      },
      passwordkong(){
          if(this.password == ''){
              this.passwordc = false
              this.passwordk = true
              this.x2 = 0;
          }else{
              this.passwordk = false
              var pattern = /^[\w_-]{6,16}$/;
              if(!pattern.test(this.password)){
                  this.passwordc = true
                  this.x2 = 0;
              }else{
                  this.passwordc = false
                  this.x2 = 1;
              }
          }
      },
      namecuo(){
          if(this.name == ''){
              this.namec = false
              this.namek = true
              this.x3 = 0;
          }else{
              this.namek = false
              var pattern = /^([\u4e00-\u9fa5]){2,5}$/;
              if(!pattern.test(this.name)){
                  this.namec = true
                  this.x3 = 0;
              }else{
                  this.namec = false
                  this.x3 = 1;
              }
          }
      },
      telcuo(){
          if(this.tel == ''){
              this.telc = false
              this.telk = true
              this.x5 = 0;
          }else{
              this.telk = false
              var pattern = /^\d{11}$/;
              if(!pattern.test(this.tel)){
                  this.telc = true;
                  this.x5 = 0;
              }else{
                  this.telc = false
                  this.x5 = 1;
              }
          }
      },
      emailcuo(){
          if(this.area == ''){
              this.emailk = true
              this.x6 = 0;
          }else{
              this.emailk = false
              this.x6 = 1;
          }
      },
      serviceall(){
        this.service=[];
        var services = document.querySelectorAll('.service')
        for(let i=0; i<services.length; i++){
          if(services[i].checked == true){
            this.service.push(services[i].value)
          }
        }
        console.log(this.service);
      },
      get(){
          this.$router.push('/about');
      },
    }
}
</script>

<style scoped>
.box{
  width: 100%;
}
.warp{
  position: relative;
  width: 1200px;
  box-sizing: border-box;
  padding: 50px;
  margin: 100px auto 0px;
  background-color: rgb(245, 245, 245);
}
.logo{
  position: absolute;
  top: -100px;
}
.zhuce{
    width: 100%;
    height: 100%;
    background-color: #fff;
    border-radius: 20px;
    padding-bottom: 30px;
}
.choice{
    text-align: center;
    padding:40px 0;
    width: 100%;
    height: 40px;
}
.choice button{
    width: 200px;
    height: 40px;
    background-color: rgb(245,111,124);
    border: none;
    color: #fff;
    font-size: 18px;
    border-radius: 5px;
    margin: 0 20px;
}
.choice button:hover{
    cursor: pointer;
}
.c{
    padding-top: 20px;
    padding-left: 400px;
    /* text-align: center; */
}
.input{
    position: relative;
    height: 60px;
    font-size: 18px;
}
.input,.input2{
    display: flex;
    justify-content: space-between;
    width: 350px;
}
.input1{
    position: relative;
    padding: 0 20px 20px 0px;
    font-size: 18px;
    line-height: 30px;
}
.input2{
    position: relative;
    padding: 0 20px 20px 0px;
    font-size: 18px;
    line-height: 30px;
}
.input2 textarea{
    width: 250px;
    position: relative;
    top: 5px;
    font-size: 16px;
    border: 1px solid rgb(230, 230, 230);
}
.input1 input{
    margin-left: 60px;
    margin-right: 5px;
}
.input input{
    width: 200px;
    font-size: 16px;
    text-indent: 10px;
    height: 30px;
    border: 1px solid rgb(230, 230, 230);
}
select{
    width: 207px;
    font-size: 16px;
    text-indent: 10px;
    height: 37px;
    border: 1px solid rgb(230, 230, 230);
}
.security{
    width: 200px;
    font-size: 16px;
    text-indent: 10px;
    height: 30px;
    border: 1px solid rgb(230, 230, 230);
}
.tip{
    color: #ccc;
    font-size: 14px;
    margin-left: 10px;
    
}
.uidk{
  font-size: 14px;
  color: red;
  position: absolute;
  top: 35px;
  left: 0px;
}
.uidk1{
  font-size: 14px;
  color: red;
  position: absolute;
  top: 40px;
  left: 0px;
}
.uidk3{
  font-size: 14px;
  color: red;
  position: absolute;
  top: 60px;
  left: 0px;
}
.typek{
  font-size: 14px;
  color: red;
  position: absolute;
  top: 60px;
  left: 50px;
}
.securityk{
  font-size: 14px;
  color: red;
  position: absolute;
  top: 147px;
  left: 60px;
}
.input .age{
    width: 40px;
    border-radius: 10px;
    background-color: #fff;
}
.register{
    display: block;
    margin-left:100px;
    margin-top: 5px;
    width: 150px;
    height: 30px;
    border: none;
    background-color: rgb(251,240,156);
    font-size: 16px;
    border-radius: 5px;
}
.zhuce .choice .xuanzhong{
    background-color: rgb(251,240,156);
    color: black;
}
.shadow{
    position: fixed;
    z-index: 999;
    width: 440px;
    height: 250px;
    top: 250px;
    left: 50%;
    margin-left: -200px;
    background-color: #ffffff;
    border: 1px solid #ccc;
    border-radius: 10px;
    text-align: center;
    font-size: 30px;
    line-height: 100px;
}
.green{
    color: greenyellow;
    font-size: 120px;
}
.buzhou{
    padding: 100px;
    padding-bottom: 30px;
    padding-top: 70px;
}
</style>